<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>帮我排队</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]--></head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">

            <div class="layui-input-inline layui-show-xs-block">
                <label for="luDictType" class="layui-form-label">任务分类
                </label>
                <div class="layui-input-inline">
                    <select id="luDictType" name="luDictType" lay-verify="required"
                            class="select">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="luContent" class="layui-form-label">
                    <span class="x-red">*</span>填写你想要排队的内容</label>
                <div class="layui-input-inline">
                    <input type="text" id="luContent" name="luContent" required="" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="luPhone" class="layui-form-label">
                    <span class="x-red">*</span>联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" id="buyPhone" name="buyPhone" required="" lay-verify="phone" autocomplete="off"
                           class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label for="lulineAddr" class="layui-form-label">
                    <span class="x-red">*</span>排队的地址</label>
                <div class="layui-input-inline">
                    <input type="text" id="lulineAddr" name="lulineAddr" required="" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
            </div>




            <div class="layui-form-item">
                <label for="orderAnnotation" class="layui-form-label">
                    <span class="x-red">*</span>备注</label>
                <div class="layui-input-inline">
                    <input type="text" id="orderAnnotation" name="orderAnnotation" required="" lay-verify="required"
                           autocomplete="off" class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="payOption" class="layui-form-label">
                    <span class="x-red">*</span>支付方式</label>
                <div class="layui-input-inline">
                    <select name="payOption">
                        <option>支付方式</option>
                        <option>支付宝</option>
                        <option>微信</option>
                        <option>货到付款</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="onOrders" lay-submit="">立即下单</button>
            </div>
        </form>
    </div>
</div>
<script>layui.use(['form', 'layer','table', 'layedit', 'laydate'],
    function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
        var table = layui.table;

        initSelect(form);

        //监听提交
        form.on('submit(onOrders)',
            function (data) {
                console.log("data数据：", data);
                $.ajax({
                    //请求方式
                    type: "POST",
                    //请求的媒体类型
                    //contentType: "application/json;charset=UTF-8",
                    //请求地址
                    url: "/lineUp/add",
                    //数据，(json字符串 JSON.stringify(data)),
                    data: data.field,
                    //请求成功
                    success: function (result) {
                        if (result > 0) {
                            //发异步，把数据提交给springmvc
                            layer.alert("增加成功", {
                                icon: 6
                            }, function () {
                                // 获得frame索引
                                var index = parent.layer
                                    .getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);

                                parent.location.reload();//刷新父页面更新修改后的表格数据
                            });
                        } else {
                            //发异步，把数据提交给
                            layer.alert("增加失败！", {
                                icon: 6
                            });
                        }
                    }
                });
                return false;
            });

    });


let optionData;

function initSelect(form) {



    /* 调用获取下拉框数据的方法 */
    findOptionByDictType("帮我排队", form);

}

/**
 * 获得条件下拉框
 * @param {Object} type  下拉框类型
 * @param {Object} form
 */
function findOptionByDictType(type, form) {
    var dictId;
    $.post("/dict/findDictByDictTypeList", {
        "dictType": type
    }, function(res) {
        /*console.log(res);*/
        if(type === "帮我排队") {
            dictId = "#luDictType"; //帮我排队
        }
        $(dictId).append(new Option(type, "0"));
        $.each(res, function(index, item) {
            $(dictId).append(new Option(item.dictItem, item.dictId));
        });

        //重新渲染
        form.render("select");
    }, 'json');
}


</script>

</body>

</html>